<template>
  <el-page-header
    content="用户列表"
    icon=""
    title="用户管理"
  />
  <el-card>
    <el-table
      :data="tableData"
      style="width: 100%"
      size="large"
    >
      <el-table-column
        label="头像"
        width="200"
      >
        <template #default="scope">
          <el-avatar
            :size="50"
            :src="`http://localhost:3000${scope.row.avatar}`"
          ></el-avatar>
        </template>
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        width="200"
      />
      <el-table-column
        label="性别"
        width="200"
      >
        <template #default="scope">
          {{ scope.row.gender === 1 ? '男' : '女' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="introduction"
        label="简介"
        width="250"
      />
      <el-table-column
        prop="role"
        label="角色"
        width="200"
      >
        <template #default="scope">
          <el-tag
            v-if="scope.row.role === 1"
            type="warning"
          >管理员</el-tag>
          <el-tag
            v-else
            type="success"
          >普通用户</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="primary"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-popconfirm
            title="你确定要删除该用户吗？"
            confirm-button-text="确定"
            cancel-button-text="取消"
            width="200px"
            @confirm="handleDelete(scope.row)"
          >
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <el-dialog
    v-model="dialogVisible"
    title="编辑用户"
    width="500"
  >
    <el-form
      ref="userFormRef"
      :model="userForm"
      :rules="userFormRules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item
        label="用户名"
        prop="username"
      >
        <el-input v-model="userForm.username" />
      </el-form-item>
      <el-form-item
        label="密码"
        prop="password"
      >
        <el-input
          v-model="userForm.password"
          type="password"
          autocomplete="off"
          show-password
        />
      </el-form-item>
      <el-form-item
        label="角色"
        prop="role"
      >
        <el-select
          v-model="userForm.role"
          class="m-2"
          placeholder="请选择"
          style="width:100%"
        >
          <el-option
            v-for="item in roleOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="handleConfirm()"
        >
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import axios from 'axios';
import { ElMessage } from 'element-plus';
const tableData = ref([])
const dialogVisible = ref(false)
const userFormRef = ref();
const userForm = reactive({
  _id: '',
  username: '',
  password: '',
  role: 2,
});

const userFormRules = reactive({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  role: [{ required: true, message: "请选择角色", trigger: "blur" }]
});
const roleOptions = [
  {
    label: "管理员",
    value: 1
  },
  {
    label: "普通用户",
    value: 2
  }
];
onMounted(() => {
  getTableData()
})
const getTableData = async () => {
  const res = await axios.get('/adminapi/user/list')
  tableData.value = res.data.data
}
const handleEdit = async (row) => {
  const res = await axios.get(`/adminapi/user/list/${row._id}`)
  userForm.username = res.data.data[0].username
  userForm.password = res.data.data[0].password
  userForm.role = res.data.data[0].role
  userForm._id = res.data.data[0]._id
  dialogVisible.value = true
}
const handleDelete = async (row) => {
  const res = await axios.delete(`/adminapi/user/${row._id}`)
  if (res.data.ActionType === 'OK') {
    ElMessage.success('删除成功')
    getTableData()
  }
}
const handleConfirm = async () => {
  userFormRef.value.validate(async (valid) => {
    if (valid) {
      await axios.put(`/adminapi/user/${userForm._id}`, userForm)
      ElMessage.success('更新成功')
      dialogVisible.value = false
      getTableData()
    }
  })
}
</script>

<style lang="scss" scoped>
.el-card {
  margin-top: 20px;
}

.el-form {
  margin-right: 60px;
}</style>